<template>
  <div>
<!--     <mt-header class="header" fixed title="喜来钱">
      <router-link to="" slot="left" @click.native="goBack">
        <mt-button icon="back"></mt-button>
      </router-link>
    </mt-header> -->
    <div class="wrap-login-box">
      <div class="login-box">
        <div class="input-box input-name">
          <input type="text" placeholder="填写您的姓名" v-model="name">
        </div>
        <div class="input-box input-card">
          <input type="text" placeholder="填写您的身份证号" v-model="card">
        </div>

        <div class="input-box input-phone">
          <input type="number" placeholder="填写您的手机号" v-model="phone">
        </div>
        <div class="input-box input-code">
          <input type="number" placeholder="请输入验证码" v-model="code">
          <span class="send-code" @click="senCode">{{codeText}}{{second}}</span>
        </div>
        <div class="login-btn2" @click="submit">立即借款</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      urlphone: '',
      name: '',
      card: '',
      phone: '',
      code: '',
      channel: '',
      codeText: '发送验证码',
      second: '',
      key: ''
    }
  },
  methods: {
    senCode() {
      var that = this
      var myreg = /^[1][0-9]{10}$/
      if (that.second === '') {
        if (that.phone === '') {
          that.$pub.Tooast('请输入手机号码')
          return false
        } else if (!myreg.test(that.phone)) {
          that.$pub.Tooast('请输入有效的手机号码')
          return false
        }
        that.$pub.requset('/account/app_code', 'get', {
          phone: that.phone,
          develop: false
        }, function(res) {
          that.$pub.Tip('提示', '验证码已发送到手机')
          that.codeText = '120'
          that.second = 's'
          let timer = setInterval(() => {
              that.codeText--;
              if (that.codeText === 0) {
                  clearInterval(timer);
                    that.codeText = '发送验证码'
              }
          }, 1000);
        })
      }
    },
    submit: function() {
      var that = this
      var myreg = /^[1][0-9]{10}$/
      if (that.name === '') {
        that.$pub.Tooast('请填写姓名')
        return false
      }
      if (that.card === '') {
        that.$pub.Tooast('请填写您的身份证号')
        return false
      } else if (that.card.length !== 15 && that.card.length !== 18) {
        that.$pub.Tooast('身份证不合法')
        return false
      }
      if (that.phone === '') {
        that.$pub.Tooast('填写您的银行卡预留手机号')
        return false
      } else if (!myreg.test(that.phone)) {
        that.$pub.Tooast('请输入有效的手机号码')
        return false
      }
      that.$pub.requset('/url/register_app', 'post', {
        phone: that.phone,
        idNumber: that.card,
        code: that.code,
        name: that.name,
        boundleId: 'com.yuangu.xiaohuangfeng',
        // key: 'CusOHtqh'
        key: that.key
      }, function(res) {
        if (res.code === 10200) {
          window.location.href =  res.data
        } else if (res.code === 10302 ) {
          window.location.href =  res.data
        } else {
          that.$pub.Tooast(res.msg)
        }
      })
    },
    sendLog (key) {
      var that = this
      that.$pub.requset('/url/log/'+key, 'post', function(res) {

      })
    }
  },
  mounted: function() {
    var url = '?' + window.location.href.split('?')[1]
    var theRequest = new Object();
    if (url.indexOf("?") != -1) {
      var str = url.substr(1);
      var strs = str.split("&");
      for (var i = 0; i < strs.length; i++) {
        theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
      }
      this.key = theRequest.c
    }
    this.sendLog(this.key)
  }
}
</script>
<style>
.header {
  height: 1.333333rem;
  color: #000;
  font-size: 0.4rem;
  background: #fff;
  z-index: 10;
}

.wrap-login-box {
  width: 10.0rem;
  background: #f3f4f4 url(../assets/img/back.png) no-repeat top center;
  background-size: 100%;
  overflow: hidden;
}

.login-box {
  margin: 0.8rem 0.4rem 0.4rem 0.4rem;
  margin-top: 7.546667rem;
  padding: 0.886667rem 0.453333rem 0.866667rem 0.453333rem;
  background: #fff;
  border-radius: 0.24rem;
  box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.05);
}

.input-box {
  position: relative;
  height: 1.12rem;
  margin-bottom: 0.4rem;
  padding-left: 0.55rem;
  border-radius: 0.68rem;
  overflow: hidden;
  /*border: #9c9c9c solid 1px;*/
  background-color: #f2f2f2;
}

.input-box input::-webkit-input-placeholder {
  color: #c2c2c2;
}

.input-name {
  background-image: url(../assets/img/name.png);
  background-repeat: no-repeat;
  background-position: left 0.426667rem center;
  background-size: 0.533333rem 0.533333rem;
}

.input-card {
  background-image: url(../assets/img/card.png);
  background-repeat: no-repeat;
  background-position: left 0.426667rem center;
  background-size: 0.533333rem 0.533333rem;
}

.input-phone {
  background-image: url(../assets/img/phone.png);
  background-repeat: no-repeat;
  background-position: left 0.426667rem center;
  background-size: 0.533333rem 0.533333rem;
}

.input-code {
  background-image: url(../assets/img/code.png);
  background-repeat: no-repeat;
  background-position: left 0.426667rem center;
  background-size: 0.413333rem 0.453333rem;
}

.input-box input {
  display: block;
  width: 100%;
  height: 0.8rem;
  padding-left: 0.6rem;
  font-size: 0.4rem;
  line-height: 0.8rem;
  margin-top: 0.15rem;
  background: transparent;
  box-sizing: border-box;
}
.send-code {
  display: block;
  width: 2.6rem;
  height: 0.826667rem;
  padding: 0 0.28rem;
  position: absolute;
  right: 0.146667rem;
  top: 0.146667rem;
  background: #0a78ff;
  border-radius: 0.413333rem;
  line-height: 0.826667rem;
  text-align: center;
  font-size: 0.36rem;
  color: #fff;
  box-sizing: border-box;
}

.login-btn2 {
  height: 1.12rem;
  margin-top: 0.8rem;
  border-radius: 0.56rem;
  font-size: 0.4rem;
  color: #fff;
  font-weight: 400;
  line-height: 1.12rem;
  background: -webkit-linear-gradient(to right, #439efb, #0d7aff);
          background: linear-gradient(to right, #439efb, #0d7aff);

  box-shadow: 0 0.126667rem 0.433333rem 0.083333rem rgba(16, 124, 255, 0.3)
}

</style>
